<template>
	<div class="aieditor-container">
		<div ref="editorRef" name="content" type="text/plain" style="height: 500px;"></div>
	</div>
</template>

<script lang="ts">
import { ref, toRefs, reactive, defineComponent, onMounted, watch } from 'vue';
import { AiEditor } from "./index.js"
import "./style.css"
export default defineComponent({
	name: "aieditor",
	components: {},
    props: {
		config: {
			type: Object,
			default: () => {},
		}
	},
    setup(props, { emit }) {
        const editorRef = ref();
		const state = reactive({

        });
        onMounted(() => {
            
        })

        watch(() => props.config, () => {
            const configs = Object.assign({
                element: editorRef.value as Element,
                placeholder: "点击输入内容...",
                contentRetention: true,
                content: 'AiEditor 是一个面向 AI 的开源富文本编辑器。 ',
                ai: {
                    model: {
                        xinghuo:{
                            appId: '',
                            urlSignatureAlgorithm: '',
                        }
                    },
                    bubblePanelEnable: true,
                    bubblePanelModel: "xinghuo",
                },
            }, props.config) as any;
            new AiEditor(configs);
        },{deep: true})

        return {
            editorRef,
            ...toRefs(state),
        };
    }
});
</script>